import React from 'react';
import './ActionController.css';
import { useTranslation } from 'react-i18next';

// 动作选项类型定义
export type ActionType = 'bow' | 'spin' | 'jump' | 'idle';

// 动作控制组件的属性接口
interface ActionControllerProps {
  onActionChange: (action: ActionType) => void; // 动作改变时的回调函数
  currentAction: ActionType; // 当前选择的动作
  language?: 'zh' | 'en'; // 为兼容旧接口，现已由 i18n 接管
}

// 动作控制组件
const ActionController: React.FC<ActionControllerProps> = ({ 
  onActionChange, 
  currentAction,
}) => {
  const { t } = useTranslation();

  // 处理选择器值改变 - 当用户选择不同动作时调用
  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    event.stopPropagation(); // 阻止事件冒泡到3D场景
    onActionChange(event.target.value as ActionType); // 调用父组件的动作改变函数
  };

  // 处理鼠标事件，阻止冒泡到3D场景
  const handleMouseDown = (event: React.MouseEvent) => {
    event.stopPropagation(); // 阻止鼠标按下事件冒泡
  };

  const handleMouseUp = (event: React.MouseEvent) => {
    event.stopPropagation(); // 阻止鼠标抬起事件冒泡
  };

  const options = [
    { value: 'idle', label: t('actions.idle') },
    { value: 'bow', label: t('actions.bow') },
    { value: 'spin', label: t('actions.spin') },
    { value: 'jump', label: t('actions.jump') },
  ];

  return (
    <div 
      className="action-controller"
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
    >
      {/* 动作选择器 - 根据当前语言显示对应的选项文本 */}
      <select
        value={currentAction}
        onChange={handleChange}
        className="action-selector"
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
      >
        {/* 遍历选项 */}
        {options.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};

export default ActionController;
